<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>在线投票系统</title>
<link type="image/x-icon" href="../images/yc.png" rel="shortcut icon"/>
<link type="text/css" rel="stylesheet" href="../css/style.css" />
</head>
<body>


 
<div id="header" class="wrap">
	<img src="../images/logo.gif" />
</div>
<div id="navbar" class="wrap">
	<div class="profile">
		<span v-if="login">您好,{{userInfo.uname}}</span>
		<span v-else><a href="../login.html">登陆</a></span>
		<span class="modify"><a href="manage.html" target="_blank">管理页面</a></span>
		<span class="addnew"><a href="add.html" target="_blank">添加新投票</a></span>
		
	</div>
	<div class="search">
		<form method="post" action="Subject!search.action">
			<input type="text" name="keywords" class="input-text" value=""/>
			<input type="submit" name="submit" class="input-button" value="" />
		</form>
	</div>
</div>

<div id="vote" class="wrap">
	<h2>参与投票</h2>
	<ul class="list">
		<li>
			<h4>{{topic.tname}}</h4>
			<p class="info">共有 {{count}}个选项，已有 {{topic.count}} 个网友参与了投票。</p>
			<form onsubmit="return false">
				<ol id="item_list">
					<li v-for="item in topic.topicItems" v-if="topic.types == 1"><label><input type="radio" name="options"  value="380" :data-ino="item.ino"/>{{item.iname}}</label></li> 
					<li v-else><label><input type="checkbox" name="options"  value="380" :data-ino="item.ino"/>{{item.iname}}</label></li> 
				</ol>
				<p class="voteView"><input type="image" src="../images/button_vote.gif" @click="addVote"/>
				<a href="manage.html"><img src="../images/button_view.gif"/></a></p>
			</form>
		</li>
	</ul>
</div>
<div id="footer" class="wrap">
	憬荃 &copy; 版权所有
</div>
<script type="text/javascript" src="../js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../js/axios.js"></script>
<script type="text/javascript" src="../js/qs.js"></script>
<script type="text/javascript" src="../js/basic.js"></script>
<script type="text/javascript">
let app = new Vue({
	el: "#vote",
	data: {
		topic: {},
		tid: "",
		count: 0
	},
	mounted: function(){
		let tid = location.search.replace("?","");
		if(!tid){//如果tid没有给定
			location.href = "manage.html";
			return;
		}
	
		this.tid = tid;
		axios.post("../topic/findByTid", qs.stringify({tid: tid})).then( rt => {
			if(rt.status == 200 && rt.data.code == 200){
				this.topic = rt.data.data;
				this.count = this.topic.topicItems.length;
				return;
			}
			location.href = "manage.html";
		})
	},
	methods: {
		addVote: function(){
			var inos = []; //存放用户投的选项的id
			$("#item_list input:checked").each(function(index, item) {
				inos.push($(item).data("ino"));
			})
			
			if(!inos || inos.length <= 0){
				alert("请选择您的投票项...");
				return;
			}
			
			axios.post("../topic/vote", qs.stringify({tid: this.tid, inos:inos.join(",")})).then( rt => {
				if(rt.status == 200 && rt.data.code == 200){
					alert("投票成功...");
					location.href = "manage.html";
					return;
				}
				alert("投票失败,请稍后重试...");
			})
		}
	}
})
</script>
</body>
</html>
